<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>搜索</title>
    <link rel="stylesheet" href="./css/search.css">
</head>
<body>
    <div class="container">
        <!-- 搜索框 -->
        <div class="search-container">
            <div class="search-box">
                <input type="text" class="search-input" placeholder="搜索绘本名称、作者或关键词">
                <button class="search-btn">
                    <i class="fas fa-search"></i>
                    搜索
                </button>
            </div>
        </div>
<!-- 筛选区域 -->
<div class="filter-section">
    <div class="filter-wrapper">
        <!-- 第一行：主题分类和受众年龄 -->
        <div class="filter-row">
            <div class="filter-group">
                <div class="filter-label">主题分类:</div>
                <div class="filter-options">
                    <span class="filter-option active">全部</span>
                    <span class="filter-option">语言表达类</span>
                    <span class="filter-option">品德教育类</span>
                    <span class="filter-option">知识启蒙类</span>
                </div>
            </div>
            <div class="filter-group">
                <div class="filter-label">受众年龄:</div>
                <div class="filter-options">
                    <span class="filter-option active">全部</span>
                    <span class="filter-option">0-2岁</span>
                    <span class="filter-option">3-4岁</span>
                    <span class="filter-option">5-6岁</span>
                </div>
            </div>
        </div>

        <!-- 第二行：表现形式和出版地区 -->
        <div class="filter-row">
            <div class="filter-group">
                <div class="filter-label">表现形式:</div>
                <div class="filter-options">
                    <span class="filter-option active">全部</span>
                    <span class="filter-option">纸质绘本</span>
                    <span class="filter-option">电子绘本</span>
                    <span class="filter-option">有声绘本</span>
                </div>
            </div>
            <div class="filter-group">
                <div class="filter-label">出版地区:</div>
                <div class="filter-options">
                    <span class="filter-option active">全部</span>
                    <span class="filter-option">国内绘本</span>
                    <span class="filter-option">欧美绘本</span>
                    <span class="filter-option">日韩绘本</span>
                </div>
            </div>
        </div>

        <!-- 第三行：绘本风格和故事篇幅 -->
        <div class="filter-row">
            <div class="filter-group">
                <div class="filter-label">绘本风格:</div>
                <div class="filter-options">
                    <span class="filter-option active">全部</span>
                    <span class="filter-option">卡通风格</span>
                    <span class="filter-option">水彩风格</span>
                    <span class="filter-option">油画风格</span>
                </div>
            </div>
            <div class="filter-group">
                <div class="filter-label">故事篇幅:</div>
                <div class="filter-options">
                    <span class="filter-option active">全部</span>
                    <span class="filter-option">短篇绘本</span>
                    <span class="filter-option">中篇绘本</span>
                    <span class="filter-option">长篇绘本</span>
                </div>
            </div>
        </div>

        <!-- 第四行：新旧程度和装帧形式 -->
        <div class="filter-row">
            <div class="filter-group">
                <div class="filter-label">新旧程度:</div>
                <div class="filter-options">
                    <span class="filter-option active">全部</span>
                    <span class="filter-option">九成新</span>
                    <span class="filter-option">八成新</span>
                    <span class="filter-option">七成新</span>
                </div>
            </div>
            <div class="filter-group">
                <div class="filter-label">装帧形式:</div>
                <div class="filter-options">
                    <span class="filter-option active">全部</span>
                    <span class="filter-option">立体</span>
                    <span class="filter-option">精装</span>
                    <span class="filter-option">平装</span>
                </div>
            </div>
        </div>
    </div>
</div>

        <!-- 搜索结果 -->
        <div class="search-results">
            <div class="results-header">
                <div class="results-count">
                    共找到 <span>40</span> 个相关商品
                </div>
                <div class="sort-options">
                    <span class="sort-option active">
                        综合排序
                        <i class="fas fa-sort"></i>
                    </span>
                    <span class="sort-option">
                        销量优先
                        <i class="fas fa-sort"></i>
                    </span>
                    <span class="sort-option">
                        价格
                        <i class="fas fa-sort"></i>
                    </span>
                </div>
            </div>

            <!-- 书籍网格 -->
            <div class="book-grid">
                <!-- 书籍卡片示例 -->
                <div class="book-card">
                    <div class="book-image">
                        <img src="./img/tupian3.jpg" alt="">
                    </div>
                    <div class="book-info">
                        <h3 class="book-title">xi</h3>
                        <div class="book-meta">
                            <span>九成新</span>
                            <span>4-5岁</span>
                        </div>
                        <div class="book-price">¥15</div>
                    </div>
                </div>

                
                <!-- 更多书籍卡片 -->
            </div>

            <!-- 分页 -->
            <div class="pagination">
                <button class="page-btn">上一页</button>
                <button class="page-btn active">1</button>
                <button class="page-btn">2</button>
                <button class="page-btn">3</button>
                <span>...</span>
                <button class="page-btn">5</button>
                <button class="page-btn">下一页</button>
            </div>
        </div>
    <script src="./layui/layui.js"></script>
    <script>
       document.addEventListener('DOMContentLoaded', function() {
    layui.use(['layer'], function(){
        const layer = layui.layer;
        
        // 存储所有商品数据（示例数据）
        const allBooks = [
            {
                id: 1,
                title: "当动物有了手机",
                image: "./img/tupian3.jpg",
                price: 15,
                condition: "八成新",
                age: "0-2岁",
                category: "知识启蒙类",
                format: "有声绘本",
                region: "国内地区",
                style: "卡通风格",
                length: "中篇绘本",
                binding: "精装"
            },
            {
                id: 2,
                title: "我妈妈",
                image: "./img/tupian4.jpg",
                price: 15,
                condition: "八成新",
                age: "3-4岁",
                category: "品德教育类",
                format: "纸质绘本",
                region: "日韩地区",
                style: "油画风格",
                length: "短篇绘本",
                binding: "平装"
            },
            {
                id: 3,
                title: "水果的大聚会",
                image: "./img/tupian6.jpg",
                price: 15,
                condition: "九成新",
                age: "0-2岁",
                category: "知识启蒙类",
                format: "纸质绘本",
                region: "国内地区",
                style: "卡通风格",
                length: "短篇绘本",
                binding: "平装"
            },
            {
                id: 4,
                title: "丑小鸭",
                image: "./img/tupian12.jpg",
                price: 15,
                condition: "九成新",
                age: "5-6岁",
                category: "知识启蒙类",
                format: "有声绘本",
                region: "国内地区",
                style: "水彩风格",
                length: "中篇绘本",
                binding: "精装"
            },
            {
                id: 5,
                title: "不挑食的小兔子",
                image: "./img/tupian20.jpg",
                price: 15,
                condition: "八成新",
                age: "3-4岁",
                category: "知识启蒙类",
                format: "电子绘本",
                region: "国内地区",
                style: "油画风格",
                length: "短篇绘本",
                binding: "平装"
            },
            {
                id: 6,
                title: "中国年",
                image: "./img/tupian60.jpg",
                price: 15,
                condition: "八成新",
                age: "5-6岁",
                category: "品德教育类",
                format: "有声绘本",
                region: "国内地区",
                style: "油画风格",
                length: "中篇绘本",
                binding: "立体"
            },
            {
                id: 7,
                title: "图书馆去旅行",
                image: "./img/tupian56.jpg",
                price: 15,
                condition: "七成新",
                age: "5-6岁",
                category: "知识启蒙类",
                format: "有声绘本",
                region: "欧美地区",
                style: "卡通风格",
                length: "长篇绘本",
                binding: "平装"
            },
            {
                id: 8,
                title: "折耳兔奇奇",
                image: "./img/tupian64.jpg",
                price: 15,
                condition: "七成新",
                age: "0-2岁",
                category: "品德教育类",
                format: "纸质绘本",
                region: "有声地区",
                style: "水彩风格",
                length: "长篇绘本",
                binding: "平装"
            },
            {
                id: 9,
                title: "三只小猪",
                image: "./img/tupian69.jpg",
                price: 15,
                condition: "八成新",
                age: "3-4岁",
                category: "品德教育类",
                format: "有声绘本",
                region: "国内地区",
                style: "卡通风格",
                length: "长篇绘本",
                binding: "平装"
            },
            {
                id: 10,
                title: "遇见古埃及人",
                image: "./img/tupian39.jpg",
                price: 15,
                condition: "八成新",
                age: "5-6岁",
                category: "语言表达类",
                format: "纸质绘本",
                region: "欧美地区",
                style: "水彩风格",
                length: "短篇绘本",
                binding: "平装"
            },
        
            // ... 更多商品数据
        ];

        // 获取所有筛选选项
        const filterOptions = document.querySelectorAll('.filter-option');
        
        // 存储当前筛选条件
        let currentFilters = {
            "主题分类": "全部",
            "受众年龄": "全部",
            "表现形式": "全部",
            "出版地区": "全部",
            "绘本风格": "全部",
            "故事篇幅": "全部",
            "新旧程度": "全部",
            "装帧形式": "全部"
        };

        // 为每个筛选选项添加点击事件
        filterOptions.forEach(option => {
            option.addEventListener('click', function() {
                // 获取筛选组和类型
                const filterGroup = this.closest('.filter-group');
                const filterType = filterGroup.querySelector('.filter-label').textContent.replace(':', '');
                
                // 更新选中状态
                filterGroup.querySelectorAll('.filter-option').forEach(opt => {
                    opt.classList.remove('active');
                });
                this.classList.add('active');
                
                // 更新当前筛选条件
                currentFilters[filterType] = this.textContent;
                
                // 添加选中动画
                this.classList.add('option-selected');
                setTimeout(() => {
                    this.classList.remove('option-selected');
                }, 300);

                // 应用筛选并更新显示
                applyFilters();
            });
        });

        // 应用筛选条件
        function applyFilters() {
            layer.load(2); // 显示加载动画

            setTimeout(() => {
                // 筛选商品
                const filteredBooks = allBooks.filter(book => {
                    return Object.entries(currentFilters).every(([type, value]) => {
                        if (value === '全部') return true;
                        
                        switch(type) {
                            case '主题分类':
                                return book.category === value;
                            case '受众年龄':
                                return book.age === value;
                            case '表现形式':
                                return book.format === value;
                            case '出版地区':
                                return book.region === value;
                            case '绘本风格':
                                return book.style === value;
                            case '故事篇幅':
                                return book.length === value;
                            case '新旧程度':
                                return book.condition === value;
                            case '装帧形式':
                                return book.binding === value;
                            default:
                                return true;
                        }
                    });
                });

                // 更新显示结果
                updateBookDisplay(filteredBooks);
                
                // 更新结果数量
                updateResultCount(filteredBooks.length);
                
                layer.closeAll('loading');
                layer.msg('筛选完成', {icon: 1});
            }, 500);
        }

        // 更新商品显示
        function updateBookDisplay(books) {
            const bookGrid = document.querySelector('.book-grid');
            bookGrid.style.opacity = '0';
            
            setTimeout(() => {
                // 清空现有内容
                bookGrid.innerHTML = '';
                
                // 添加筛选后的商品
                books.forEach(book => {
                    const bookCard = createBookCard(book);
                    bookGrid.appendChild(bookCard);
                });
                
                // 添加显示动画
                bookGrid.style.opacity = '1';
                
                // 重新绑定卡片事件
                bindBookCardEvents();
            }, 300);
        }

        // 创建商品卡片
        function createBookCard(book) {
            const card = document.createElement('div');
            card.className = 'book-card';
            card.innerHTML = `
                <div class="book-image">
                    <img src="${book.image}" alt="${book.title}">
                </div>
                <div class="book-info">
                    <h3 class="book-title">${book.title}</h3>
                    <div class="book-meta">
                        <span>${book.condition}</span>
                        <span>${book.age}</span>
                    </div>
                    <div class="book-price">¥${book.price}</div>
                </div>
            `;
            return card;
        }

        // 更新结果数量
        function updateResultCount(count) {
            const countSpan = document.querySelector('.results-count span');
            countSpan.textContent = count;
        }

        // 修改bindBookCardEvents函数中的点击事件处理
        function bindBookCardEvents() {
            const bookCards = document.querySelectorAll('.book-card');
            bookCards.forEach((card, index) => {
                // 悬停效果保持不变
                card.addEventListener('mouseenter', function() {
                    this.classList.add('hover');
                });
                
                card.addEventListener('mouseleave', function() {
                    this.classList.remove('hover');
                });
                
                // 修改点击事件处理
                card.addEventListener('click', function() {
                    const title = this.querySelector('.book-title').textContent;
                    const bookData = allBooks[index]; // 获取对应的书籍数据
                    // 使用layer.js显示加载提示
                    layer.msg(`正在跳转到《${title}》详情页...`, {
                        icon: 16, // 加载图标
                        time: 1000, // 显示1秒
                        shade: [0.3, '#000'],
                    }, function() {
                        // 将书籍数据存储到sessionStorage
                        sessionStorage.setItem('currentBook', JSON.stringify(bookData));
                        // 跳转到详情页
                        window.location.href = `detail.html?id=${bookData.id}&title=${encodeURIComponent(title)}`;
                    });
                });
            });
}
        // 搜索功能
        const searchInput = document.querySelector('.search-input');
        const searchBtn = document.querySelector('.search-btn');

        searchBtn.addEventListener('click', handleSearch);
        searchInput.addEventListener('keypress', (e) => {
            if (e.key === 'Enter') handleSearch();
        });

        function handleSearch() {
            const keyword = searchInput.value.trim().toLowerCase();
            if (!keyword) {
                layer.msg('请输入搜索关键词', {icon: 2});
                return;
            }

            // 在筛选结果中搜索
            const searchResults = allBooks.filter(book => {
                return book.title.toLowerCase().includes(keyword) ||
                       book.category.toLowerCase().includes(keyword);
            });

            updateBookDisplay(searchResults);
            updateResultCount(searchResults.length);
            layer.msg('搜索完成', {icon: 1});
        }

        // 初始化显示
        applyFilters();
    });
});
    </script>
    
</body>
</html>